<template>
    <div class="main">
      <nav>
        <a href="#/Home">首页</a> | <a href="#/Movie">电影</a> |
        <a href="#/About">关于</a>
      </nav>
      <section>
        <KeepAlive>
          <component :is="coms[comName]"></component>
        </KeepAlive>
      </section>
    </div>
  </template>
  
  <script lang="ts" setup>
  import Home from "@/views/HomeView.vue";
  import Movie from "@/views/MovieView.vue";
  import About from "@/views/AboutView.vue";
  import { ref, KeepAlive, onMounted } from "vue";
  
  let coms = {
    Home,
    Movie,
    About,
  };
  
  let comName = ref("Home");
  //当页面挂载成功时的钩子
  onMounted(() => {
    //当hash值变化时的事件
    window.addEventListener(
      "hashchange",
      (event) => {
        //#/Home,获取路径名称
        let comKey = location.hash.substring(2);
        //更换当前组件名称
        comName.value = comKey;
      },
      false
    );
  });
  </script>
  
  <style>
  .main a {
    color: #00f;
    text-decoration: none;
    font-size: 16px;
  }
  .main a:hover {
    color: orangered;
  }
  .main nav {
    border-bottom: 2px solid #999;
    height: 46px;
    line-height: 46px;
  }
  </style>